<template>
  <h1>国际化Demo</h1>
  <div>
    <h3>ElementPlus组件的国际化</h3>
    <el-config-provider :locale="local === 'zh' ? zhCn : en">
      <el-pagination v-model:current-page="currentPage1" :page-size="100" layout="total, prev, pager, next"
        :total="1000" />
    </el-config-provider>
  </div>
  <div>
    <h3>业务中的国际化</h3>
    <p>{{ $t('login.title') }}</p>
    <el-button type="primary">{{ $t('login.title') }}</el-button>
    <lang-select></lang-select>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import en from 'element-plus/es/locale/lang/en'
import { getItem } from '@/utils/storage'
import { LANG } from '@/constant'
import LangSelect from '@/components/LangSelect/index.vue'
import { watchLangChange } from '@/utils/i18n'

defineOptions({
  name: 'DemoPage'
})
const local = ref(getItem(LANG) || 'zh')
watchLangChange((lang) => {
  console.log('langlang: ', lang);
  local.value = lang
})
const currentPage1 = ref(5)
</script>
